import React from "react";
import {
  AppstoreOutlined,
  HomeOutlined,
  UnorderedListOutlined,
  ToolOutlined,
  UserOutlined,
  PictureOutlined,
  AreaChartOutlined,
  PieChartOutlined,
  BarChartOutlined,
  LineChartOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";
import logo from "../login/images/logo192.png";
import "./nav.css";
import { Link, useLocation } from "react-router-dom";

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

const items = [
  getItem(<Link to="home">首页</Link>, "home", <HomeOutlined />),

  getItem("商品", "prod_about", <AppstoreOutlined />, [
    getItem(
      <Link to="category">分类管理</Link>,
      "category",
      <UnorderedListOutlined />
    ),
    getItem(<Link to="product">商品管理</Link>, "product", <ToolOutlined />),
  ]),
  getItem(<Link to="user">用户管理</Link>, "user", <UserOutlined />),
  getItem(<Link to="slides">轮播管理</Link>, "slides", <PictureOutlined />),

  getItem("图形图表", "charts", <AreaChartOutlined />, [
    getItem(<Link to="charts/pie">饼图</Link>, "pie", <PieChartOutlined />),
    getItem(
      <Link to="charts/line">折线图</Link>,
      "line",
      <LineChartOutlined />
    ),
    getItem(<Link to="charts/bar">柱状图</Link>, "bar", <BarChartOutlined />),
  ]),
];

export default function Nav() {
  const location = useLocation();
  return (
    <div>
      <header className="nav_header">
        <img className="nav_logo" src={logo} alt="logo" />
        <h1>商品管理系统</h1>
      </header>
      <Menu
        selectedKeys={
          location.pathname.indexOf("product") !== -1
            ? "product"
            : location.pathname.split("/").reverse()[0]
        }
        defaultOpenKeys={[
          location.pathname.indexOf("charts") !== -1 ? "charts" : "prod_about",
        ]}
        mode="inline"
        theme="dark"
        items={items}
      />
    </div>
  );
}
